<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            position: relative;
        }
        ul{
            width: 1200px; 
            /* 最小宽度 */
            min-width: 600px; 
            margin: 0px auto;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .big{
            width: 300px;
            height: 300px;
            position: absolute;
            display: none;
        }
    </style>
    <script>
        window.onload=function(){
            var imgs=document.querySelectorAll("li img");
            var big=document.querySelector(".big");
            for (let i = 0; i < imgs.length; i++) {
                imgs[i].onmousemove=function(e){
                    big.style.top=e.y+5+"px";
                    big.style.left=e.x+5+"px";
                    big.src=this.src;
                }
                imgs[i].onmouseout=function(){
                    big.style.display="none";
                }
                imgs[i].onmouseenter=function(){
                    big.style.display="block";
                }
            }
        }
    </script>
</head>
<body>
    <img class="big" src="./a/toplist_a01.jpg" alt="">
    <ul>
        <li><img src="./a/toplist_a01.jpg" alt=""></li>
        <li><img src="./a/toplist_a02.jpg" alt=""></li>
        <li><img src="./a/toplist_a03.jpg" alt=""></li>
        <li><img src="./a/toplist_a04.jpg" alt=""></li>
        <li><img src="./a/toplist_a05.jpg" alt=""></li>
        <li><img src="./a/toplist_a06.jpg" alt=""></li>
        <li><img src="./a/toplist_a07.jpg" alt=""></li>
        <li><img src="./a/toplist_a08.jpg" alt=""></li>
    </ul>
</body>
</html>